Skip to content

Add BrowseCLI in a Vercel Sandbox example#1517

Closed
shrey150 wants to merge 11 commits into
vercel:mainfrom
shrey150:browsecli-vercel-sandbox
Closed

Add BrowseCLI in a Vercel Sandbox example#1517
shrey150 wants to merge 11 commits into
vercel:mainfrom
shrey150:browsecli-vercel-sandbox

Conversation

@shrey150

@shrey150 shrey150 commented Jun 25, 2026

Copy link
Copy Markdown

What

Adds solutions/browsecli-vercel-sandbox — a Vercel AI SDK agent that runs the browse CLI inside a Vercel Sandbox (an ephemeral Firecracker microVM) using Vercel's bash-tool.

The agent loop runs on the host (ToolLoopAgent from ai). Its model (anthropic/claude-sonnet-5) is served through Vercel AI Gateway, and its bash tool — built with createBashTool({ sandbox }) — executes commands inside the sandbox, where the browse CLI is installed. The model navigates the web by emitting browse commands; the browser itself runs remotely on Browserbase, so it never runs in the microVM.

┌──────────────────────────────┐        ┌──────────────────────────────┐   CDP/wss   ┌────────────────────────────┐
│  Host (your machine / CI)    │        │  Vercel Sandbox (microVM)    │  ────────▶  │  Browserbase cloud browser │
│  ToolLoopAgent (AI SDK)      │ ─bash─▶ │  browse CLI runs here        │ ◀────────── │  navigates / reads pages   │
└──────────────────────────────┘        └──────────────────────────────┘  page data  └────────────────────────────┘

System prompt: small, self-discovering

The system prompt is intentionally minimal. It does not enumerate browse subcommands or flags — it tells the agent the CLI is installed and pre-configured, points it at browse --help, and lets it learn the surface itself:

You are an autonomous deep-research agent. You have a `browse` CLI (Browserbase
browser automation) in your bash tool — it is installed, and its auth and a
shared browser session are already configured via environment variables. Learn
how to use it by running `browse --help` (and `browse <command> --help` as
needed), then complete the task. When you cite a document, link the direct
document itself, not a viewer, preview, or index page that wraps it. Return a
clear, well-sourced answer.

This keeps the example honest about how a capable model actually uses a CLI (read --help, then go) and avoids a brittle wall of command cheatsheet text. The one piece of steering that makes the short prompt work is moved out of the prompt and into the environment — see below.

Env-steering for a flag-free shared session

The sandbox is created with two default env vars:

env: { BROWSERBASE_API_KEY, BROWSE_SESSION: 'agent' }
  • BROWSERBASE_API_KEY — authenticates browse against Browserbase.
  • BROWSE_SESSION=agent — steers browse to run remotely and share one named browser session across commands. Because of this, the agent can just run browse open <url> (no --remote, no --session) and every command lands in the same cloud browser. This is what lets the prompt drop all the session/flag instructions.

Model via Vercel AI Gateway (no Anthropic key)

The model is routed through Vercel AI Gateway rather than a direct Anthropic provider:

  • sandbox.ts passes a bare provider/model string — model: 'anthropic/claude-sonnet-5' — which ai@6 resolves through the default Gateway provider.
  • The @ai-sdk/anthropic dependency and the ANTHROPIC_API_KEY env var are dropped entirely.
  • Gateway reads its credentials from the environment automatically. The recommended path is keyless via OIDC: the Vercel CLI's vercel env pull writes a short-lived VERCEL_OIDC_TOKEN that the Gateway uses — so one Vercel auth covers both the Sandbox and the model. An AI_GATEWAY_API_KEY is supported as an alternative for those who prefer a long-lived key.

This removes a credential from the example: a user who is already authenticated with Vercel (to create the Sandbox) does not need a separate Anthropic account or key.

Default task

A product-research example, with no site-specific instructions in the prompt — the agent plans its own steps. On Amazon it searches for the current top mechanical keyboards and, for the top 5 results, compares each product's title, price, star rating, and number of ratings, returning a comparison table that includes each product's URL. This is a genuinely browser-only task: Amazon search renders its results client-side and returns nothing useful to a plain HTTP fetch, so the agent has to drive a real browser to get the data. Override the goal with the TASK env var.

Using Amazon (https://www.amazon.com), research the current top mechanical
keyboards: search the site, then for the top 5 results compare each product's
title, price, star rating, and number of ratings. Return a comparison table
including each product's URL.

Contents

  • sandbox.ts — standalone, directly-runnable script: Sandbox.create({ runtime: 'node24' }) → install browse in the sandbox → build the bash tool → run a ToolLoopAgent (model via AI Gateway), streaming each issued browse command and ending with a ===== FINAL ANSWER ===== summary.
  • README.md / package.json / pnpm-lock.yaml / tsconfig.json / .env.example / .gitignore

The example uses pnpm to match the repo convention (packageManager: pnpm@9.13.0; every active solutions/ example commits a pnpm-lock.yaml). The committed pnpm-lock.yaml is generated with pnpm install; install/run commands in the README are pnpm install / pnpm start.

Required env

  • BROWSERBASE_API_KEY — the cloud browser.
  • VERCEL_TOKEN / VERCEL_TEAM_ID / VERCEL_PROJECT_ID — Vercel Sandbox auth.
  • Model auth via AI Gateway — either VERCEL_OIDC_TOKEN (keyless; vercel link + vercel env pull .env.local) or AI_GATEWAY_API_KEY. No ANTHROPIC_API_KEY.

E2E Test Matrix

Run against the exact committed code (sandbox.ts @ this branch) on real Vercel cloud: a freshly provisioned Firecracker microVM, browse CLI installed in-sandbox, ToolLoopAgent loop on the host, model anthropic/claude-sonnet-5 served through AI Gateway. The model run env was asserted at preflight to contain no ANTHROPIC_API_KEY and no AI_GATEWAY_API_KEY — only VERCEL_OIDC_TOKEN (keyless OIDC).

Command / flow Observed output Confidence / sufficiency
pnpm install in the example dir, then pnpm start on real Vercel cloud, minimal prompt + BROWSE_SESSION=agent env-steering, model via AI Gateway, run env asserted to have no Anthropic key and no Gateway key (pure VERCEL_OIDC_TOKEN) pnpm install resolved against the committed pnpm-lock.yaml; the run provisioned a new sandbox, agent ran browse --help first, then issued only browse subcommands (browse open / browse snapshot / browse eval) with no --remote/--session flags12 bash tool calls, all browse, zero curl/wget/fetch — completed in 13 agent steps, and ended with ===== FINAL ANSWER ===== plus a 5-product comparison table (title, price, star rating, # of ratings, and an amazon.com/dp/... URL for each) Proves the pnpm-based install + run works end-to-end on a browser-only task: the model self-discovers browse via --help, the BROWSE_SESSION env var alone gives a flag-free shared remote session, and anthropic/claude-sonnet-5 is served through AI Gateway authenticated only by the Vercel OIDC token. The agent drove a real browser (no HTTP-fetch shortcut was even possible — Amazon search results are client-rendered)
pnpm strict-node_modules resolution (the reason just-bash is now a direct dependency) Without just-bash declared, pnpm start failed immediately with ERR_MODULE_NOT_FOUND: Cannot find package 'just-bash' imported from …/bash-tool/dist/tools/bash.js. bash-tool lists just-bash as both a regular dependency and a peerDependency, so pnpm does not install it for the consumer (npm's flat layout had masked this). Adding "just-bash": "^3.0.1" to the example's dependencies resolved it; the subsequent pnpm start is the passing run above. Proves the example is genuinely installable + runnable under pnpm, not just under npm — the lockfile and the explicit just-bash dep are both load-bearing for the repo's pnpm convention
No CAPTCHA / bot-wall observed Plain remote Browserbase session loaded amazon.com, the search results page, and an individual /dp/ product page with no challenge, robot-check, or "enter the characters" interstitial in the run log Confirms a plain remote browser renders Amazon reliably enough for this demo (no Verified/Scale features needed for this run)
npx --no-install tsc --noEmit (against pnpm-installed node_modules) Exit 0, no type errors Static-typecheck guard on the committed source

Note: AI Gateway requires the Vercel team to have billing / a payment method on file to service model requests. The keyless OIDC verification above was run on a billing-enabled team; the auth mechanism itself (OIDC → Gateway) is what the change exercises.

Type of Change

  • New Example
  • Example updates (Bug fixes, new features, etc.)
  • Other (changes to the codebase, but not to examples)

New Example Checklist

  • 🛫 npm run new-example was used to create the example
  • 📚 The template wasn't used but I carefully read the Adding a new example steps and implemented them in the example (MIT license, .env.example + setup instructions, README, .gitignore; uses pnpm with a committed pnpm-lock.yaml per repo convention)
  • 📱 Is it responsive? Are mobile and tablets considered? (N/A — this is a CLI/agent script with no UI)

This PR is intentionally a draft. Opening for early visibility / format review before marking ready.

Signed-off-by: Shrey Pandya <shrey@browserbase.com>
@vercel

vercel Bot commented Jun 25, 2026

Copy link
Copy Markdown
Contributor

@shrey150 is attempting to deploy a commit to the Vercel Examples Team on Vercel.

A member of the Team first needs to authorize it.

@socket-security

socket-security Bot commented Jun 25, 2026

Copy link
Copy Markdown

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff Package Supply Chain
Security
Vulnerability Quality Maintenance License
Addednpm/​@​vercel/​sandbox@​2.3.07210010099100
Addednpm/​bash-tool@​1.3.177610010091100
Addednpm/​ai@​6.0.2177610010099100
Addednpm/​just-bash@​3.0.2841009994100

View full report

Replace the scripted single-page demo with an AI SDK agent that runs
inside the Vercel Sandbox and whose only tool is the browse CLI driving
a Browserbase cloud browser. Adds agent.mjs, rewrites sandbox.ts/README/
.env.example, and removes the obsolete demo script and Next.js route.

Signed-off-by: Shrey Pandya <shrey@browserbase.com>
@vercel

vercel Bot commented Jun 26, 2026

Copy link
Copy Markdown
Contributor

Deployment failed with the following error:

The `vercel.ts` schema validation failed with the following message: `rewrites[0]` missing required property `destination`

Learn More: https://vercel.com/docs/concepts/projects/project-configuration

Use Vercel's idiomatic bash-tool pattern: the AI SDK ToolLoopAgent loop
runs on the host and its bash tool executes inside the Vercel Sandbox,
where the browse CLI drives a Browserbase cloud browser. BROWSERBASE_API_KEY
is passed via Sandbox.create({ env }) so it reaches the in-sandbox browse
commands without being written to a file. Removes the old uploaded agent.mjs.

Signed-off-by: Shrey Pandya <shrey@browserbase.com>
@vercel

vercel Bot commented Jun 26, 2026

Copy link
Copy Markdown
Contributor

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
mintlify-docs-rewrite Error Error Jun 30, 2026 7:20pm

…arch prompt

Signed-off-by: Shrey Pandya <shrey@browserbase.com>
…otes

Signed-off-by: Shrey Pandya <shrey@browserbase.com>
…rect-URL/most-recent prompt nudges

Signed-off-by: Shrey Pandya <shrey@browserbase.com>
Signed-off-by: Shrey Pandya <shrey@browserbase.com>
Signed-off-by: Shrey Pandya <shrey@browserbase.com>
Signed-off-by: Shrey Pandya <shrey@browserbase.com>
Signed-off-by: Shrey Pandya <shrey@browserbase.com>
Switch the example's install/run commands to pnpm (npm i -> pnpm install,
npx tsx sandbox.ts -> pnpm start) and commit a pnpm-lock.yaml, matching the
convention every other solutions/ example follows (packageManager pnpm@9.13.0,
committed pnpm-lock.yaml, no package-lock.json).

Add just-bash as an explicit dependency: bash-tool lists it as both a regular
dependency and a peerDependency, so under pnpm's strict node_modules layout it
is not installed for the consumer, causing ERR_MODULE_NOT_FOUND at runtime.
npm's flat layout masked this. Declaring it directly makes the example install
and run correctly under pnpm.

Files reformatted with prettier v2 to satisfy the repo's pre-commit hook.

Signed-off-by: Shrey Pandya <shrey@browserbase.com>
@shrey150

Copy link
Copy Markdown
Author

Superseded by #1524 — reworked as a full-stack deployable guide under guides/ (where sandbox examples live), with a live Demo, Deploy button, and a VCR template image.

@shrey150 shrey150 closed this Jun 30, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant